<script setup lang="ts">
import AppTable from "@/components/app/AppTable.vue";
import { ref } from 'vue'
defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: "LoginLog"
})
// 控制详情模态框显示
const dialogVisible = ref(false)

// 登录日志详情数据
const loginLogDetail = ref({
  id: '',
  username: '',
  ip: '',
  address: '',
  browser: '',
  os: '',
  status: '0',
  msg: '',
  loginTime: ''
})

function handleBtnClick(key: string, data: any[] | null) {
  console.log(key, data)
}

// 打开详情模态框
const openDetail = (row: any) => {
  loginLogDetail.value = { ...row }
  dialogVisible.value = true
}

// 处理过长文本的显示
const formatLongText = (text: string, maxLength: number = 20) => {
  if (!text) return '';
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
}
</script>

<template>
  <div>
    <AppTable
      title="登录日志"
      :search-info="[
        {
          label: '用户名',
          key: 'username',
          value: ''
        },
        {
          label: '登录IP',
          key: 'ip',
          value: ''
        },
        {
          label: '状态',
          key: 'status',
          value: '',
          type: 'select',
          options: [
            {
              value: '0',
              label: '成功'
            },
            {
              value: '1',
              label: '失败'
            }
          ]
        }
      ]"
      :btn-show="{
        add: false,
        edit: false,
        delete: false,
        export: false,
        import: false
      }"
      :pageable="true"
      api-method="get"
      api-path="/api/sys/log/login"
      @handle-btn-click="handleBtnClick"
      @multiple-selection="data => {console.log(data)}">
      <template v-slot:actionBar>
      </template>
      <template v-slot:tableColumn>
        <el-table-column prop="id" label="编号" width="70" align="left"/>
        <el-table-column prop="username" label="用户名" align="left"/>
        <el-table-column prop="ip" label="登录IP" align="left"/>
        <el-table-column prop="address" label="登录地点" align="left"/>
        <el-table-column prop="browser" label="浏览器" align="left"/>
        <el-table-column prop="os" label="操作系统" align="left"/>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
              <el-button link v-if="scope.row.status === '0'" type="success">【成功】</el-button>
              <el-button link v-if="scope.row.status === '1'" type="danger">【失败】</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="msg" label="操作信息" align="left">
          <template #default="scope">
            <el-tooltip
              :content="scope.row.msg"
              :disabled="!scope.row.msg || scope.row.msg.length <= 20"
              placement="top">
              <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                {{ formatLongText(scope.row.msg, 20) }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="loginTime" label="登录时间" width="160" align="left"/>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </template>
    </AppTable>

    <!-- 登录日志详情模态框 -->
    <el-dialog v-model="dialogVisible" title="登录日志详情" width="600px" destroy-on-close>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="编号">{{ loginLogDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ loginLogDetail.username }}</el-descriptions-item>
        <el-descriptions-item label="登录IP">{{ loginLogDetail.ip }}</el-descriptions-item>
        <el-descriptions-item label="登录地点">{{ loginLogDetail.address }}</el-descriptions-item>
        <el-descriptions-item label="浏览器">{{ loginLogDetail.browser }}</el-descriptions-item>
        <el-descriptions-item label="操作系统">{{ loginLogDetail.os }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <div class="tag-container">
            <el-tag v-if="loginLogDetail.status === '0'" type="success" size="small">成功</el-tag>
            <el-tag v-else-if="loginLogDetail.status === '1'" type="danger" size="small">失败</el-tag>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="操作信息">
          <el-tooltip
            :content="loginLogDetail.msg"
            :disabled="!loginLogDetail.msg || loginLogDetail.msg.length <= 30"
            placement="top">
            <span>{{ formatLongText(loginLogDetail.msg, 30) }}</span>
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item label="登录时间">{{ loginLogDetail.loginTime }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
